/**
 * 按进程统计视图组件
 */
class StatsProcView {
    constructor(route) {
        this.route = route;
        this.title = route.title || '按进程统计';
        this.chart = null;
        this.table = null;
    }
    
    /**
     * 渲染页面内容
     */
    async render() {
        return `
            <div class="layui-fluid content-wrapper">
                <div class="content-header">
                    <h2>按进程统计</h2>
                </div>
                
                <div class="layui-card">
                    <div class="layui-card-header">查询条件</div>
                    <div class="layui-card-body">
                        <form class="layui-form" lay-filter="stats-proc-form">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">进程名称</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="processName" placeholder="请输入进程名称" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">统计维度</label>
                                    <div class="layui-input-inline">
                                        <select name="dimension" lay-filter="proc-dimension-filter">
                                            <option value="memory">内存使用</option>
                                            <option value="cpu">CPU使用率</option>
                                            <option value="threads">线程数</option>
                                            <option value="handles">句柄数</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn" lay-submit lay-filter="search-proc-btn">
                                        <i class="layui-icon layui-icon-search"></i> 查询
                                    </button>
                                    <button class="layui-btn layui-btn-primary" lay-filter="reset-proc-btn">
                                        <i class="layui-icon layui-icon-refresh"></i> 重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">进程统计图表</div>
                            <div class="layui-card-body">
                                <div id="procChart" style="height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">进程统计列表</div>
                            <div class="layui-card-body">
                                <table class="layui-table" id="procTable" lay-filter="proc-table">
                                    <thead>
                                        <tr>
                                            <th lay-data="{field:'processName', width:150, sort:true}">进程名称</th>
                                            <th lay-data="{field:'pid', width:80, sort:true}">PID</th>
                                            <th lay-data="{field:'memory', width:120, sort:true}">内存使用(MB)</th>
                                            <th lay-data="{field:'cpu', width:100, sort:true}">CPU使用率(%)</th>
                                            <th lay-data="{field:'threads', width:80, sort:true}">线程数</th>
                                            <th lay-data="{field:'handles', width:80, sort:true}">句柄数</th>
                                            <th lay-data="{field:'status', width:80}">状态</th>
                                            <th lay-data="{field:'startTime', width:150, sort:true}">启动时间</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
    
    /**
     * 初始化组件
     */
    async init() {
        console.log('按进程统计组件初始化');
        
        // 等待DOM加载
        await this.waitForDOM();
        
        // 初始化图表
        this.initChart();
        
        // 初始化表格
        this.initTable();
        
        // 绑定事件
        this.bindEvents();
        
        // 加载默认数据
        this.loadDefaultData();
        
        // 使用LayUI渲染
        if (typeof layui !== 'undefined') {
            layui.use(['element', 'layer', 'table', 'form'], function() {
                var element = layui.element;
                var layer = layui.layer;
                var table = layui.table;
                var form = layui.form;
                
                element.render();
                form.render();
            });
        }
    }
    
    /**
     * 等待DOM加载
     */
    waitForDOM() {
        return new Promise((resolve) => {
            if (document.getElementById('procChart') && document.getElementById('procTable')) {
                resolve();
            } else {
                setTimeout(() => resolve(), 100);
            }
        });
    }
    
    /**
     * 初始化图表
     */
    initChart() {
        const chartDom = document.getElementById('procChart');
        if (!chartDom) return;
        
        this.chart = echarts.init(chartDom);
        
        // 设置默认配置
        this.updateChart('memory');
    }
    
    /**
     * 初始化表格
     */
    initTable() {
        if (typeof layui !== 'undefined') {
            layui.use(['table'], function() {
                var table = layui.table;
                
                this.table = table.render({
                    elem: '#procTable',
                    data: this.generateMockData(),
                    page: true,
                    limit: 10,
                    limits: [10, 20, 50, 100],
                    toolbar: true,
                    defaultToolbar: ['filter', 'exports', 'print'],
                    done: function(res, curr, count) {
                        console.log('进程表格渲染完成', res, curr, count);
                    }
                });
            }.bind(this));
        }
    }
    
    /**
     * 生成模拟数据 - 已移除
     * 需要连接真实数据接口
     */
    generateMockData() {
        return []; // 静态假数据已移除
    }
    
    /**
     * 格式化日期时间
     */
    formatDateTime(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
    
    /**
     * 更新图表 - 移除模拟数据
     * @param {string} dimension - 统计维度
     */
    updateChart(dimension) {
        layer.msg('图表功能需要连接真实数据接口', {icon: 5});
    }
    
    /**
     * 绑定事件
     */
    bindEvents() {
        const self = this;
        
        // 监听搜索表单
        layui.use(['form'], function() {
            var form = layui.form;
            
            form.on('submit(search-proc-btn)', function(data) {
                self.searchData(data.field);
                return false;
            });
            
            form.on('submit(reset-proc-btn)', function() {
                self.resetSearch();
                return false;
            });
            
            form.on('select(proc-dimension-filter)', function(data) {
                self.updateChart(data.value);
            });
        });
        
        // 监听表格工具条事件
        layui.use(['table'], function() {
            var table = layui.table;
            
            table.on('toolbar(proc-table)', function(obj) {
                switch(obj.event) {
                    case 'refresh':
                        self.refreshTable();
                        break;
                    case 'export':
                        self.exportData();
                        break;
                }
            });
        });
        
        // 监听窗口大小变化
        window.addEventListener('resize', () => {
            if (this.chart) {
                this.chart.resize();
            }
        });
    }
    
    /**
     * 搜索数据 - 移除模拟数据
     */
    searchData(params) {
        layer.msg('搜索功能需要连接真实数据接口', {icon: 5});
    }
    
    /**
     * 重置搜索
     */
    resetSearch() {
        // 重置表单
        layui.form.val('stats-proc-form', {
            processName: '',
            dimension: 'memory'
        });
        
        // 重新加载默认数据
        this.loadDefaultData();
    }
    
    /**
     * 加载默认数据
     */
    loadDefaultData() {
        const data = this.generateMockData();
        this.updateChartData(data);
        this.updateTableData(data);
    }
    
    /**
     * 更新图表数据
     */
    updateChartData(data) {
        if (this.chart) {
            const processes = data.map(item => item.processName);
            const values = data.map(item => item.memory);
            
            this.chart.setOption({
                xAxis: {
                    data: processes
                },
                series: [{
                    data: values
                }]
            });
        }
    }
    
    /**
     * 更新表格数据
     */
    updateTableData(data) {
        if (this.table) {
            this.table.reload({data: data});
        }
    }
    
    /**
     * 刷新表格
     */
    refreshTable() {
        this.loadDefaultData();
        
        layui.use(['layer'], function() {
            var layer = layui.layer;
            layer.msg('表格已刷新');
        });
    }
    
    /**
     * 导出数据
     */
    exportData() {
        layui.use(['layer'], function() {
            var layer = layui.layer;
            layer.msg('数据导出功能开发中...');
        });
    }
    
    /**
     * 清理资源
     */
    destroy() {
        console.log('按进程统计组件销毁');
        
        // 销毁图表
        if (this.chart) {
            this.chart.dispose();
            this.chart = null;
        }
        
        // 清理事件监听
        window.removeEventListener('resize', this.resizeChart);
    }
}

// 注册到全局视图组件
if (!window.ViewComponents) {
    window.ViewComponents = {};
}
window.ViewComponents.statsProc = StatsProcView;